<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '认证申请',
  },
}
</route>

<script lang="ts" setup>
import type { InsertApplicationModel } from '@/service/app/types'
import { userCenterInsert } from '@/service/app/userCenter'

defineOptions({
  name: 'Certification',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 表单数据
const formData = ref<InsertApplicationModel>({
  contact: '',
  contactPhone: '',
  applyTime: '',
  remark: '',
})

// 表单验证状态
const formErrors = ref<Record<string, string>>({})
const isSubmitting = ref(false)

// 初始化申请时间
onMounted(() => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')

  formData.value.applyTime = `${year}.${month}.${day} ${hours}:${minutes}`
})

// 表单验证
function validateForm() {
  formErrors.value = {}

  if (!formData.value.contact?.trim()) {
    formErrors.value.contact = '请输入联系人'
  }

  if (!formData.value.contactPhone?.trim()) {
    formErrors.value.contactPhone = '请输入联系电话'
  }
  else if (!/^1[3-9]\d{9}$/.test(formData.value.contactPhone)) {
    formErrors.value.contactPhone = '请输入正确的手机号码'
  }

  return Object.keys(formErrors.value).length === 0
}

// 提交申请
async function submitApplication() {
  if (!validateForm()) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    })
    return
  }

  isSubmitting.value = true

  try {
    await userCenterInsert({
      body: formData.value,
    })

    uni.showToast({
      title: '申请提交成功',
      icon: 'success',
    })

    // 重置表单
    formData.value = {
      contact: '',
      contactPhone: '',
      applyTime: '',
      remark: '',
    }

    // 重新设置申请时间
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')

    formData.value.applyTime = `${year}.${month}.${day} ${hours}:${minutes}`
  }
  catch (error) {
    console.error('提交申请失败:', error)
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'none',
    })
  }
  finally {
    isSubmitting.value = false
  }
}

// 拨打电话
function makePhoneCall() {
  uni.makePhoneCall({
    phoneNumber: '400-926-2888',
  })
}
</script>

<template>
  <view
    class="min-h-screen"
    :style="{
      marginTop: `${safeAreaInsets?.top}px`,
      background: 'linear-gradient(to bottom, #E9F0FF, #F2F5F9)',
    }"
  >
    <!-- 联系信息区域 -->
    <view class="px-6 py-8 text-center">
      <view class="mb-4 text-lg text-blue-600">
        如您的产品也需要认证,请和我们联系
      </view>
      <view class="mb-6 text-4xl text-gray-700 font-bold" @click="makePhoneCall">
        400-926-2888
      </view>

      <!-- 二维码区域 -->
      <view class="mb-4 flex justify-center">
        <view class="border-2 border-gray-300 rounded-lg border-dashed p-4">
          <view class="h-32 w-32 overflow-hidden rounded">
            <image
              src="/static/images/certification/code.png"
              class="h-full w-full"
              mode="aspectFit"
            />
          </view>
        </view>
      </view>

      <view class="mb-4 text-sm text-gray-600">
        客服服务号
      </view>
      <view class="text-sm text-gray-600">
        或留下您的联系方式,我们联系您!
      </view>
    </view>

    <!-- 申请表单区域 -->
    <view class="mx-4 mb-6 rounded-2xl bg-white p-6 shadow-sm">
      <!-- 联系人 -->
      <view class="mb-4 flex items-center">
        <view class="w-20 flex items-center">
          <text class="mr-1 text-red-500">
            *
          </text>
          <text class="text-gray-700">
            联系人:
          </text>
        </view>
        <view class="flex-1">
          <input
            v-model="formData.contact"
            placeholder="请输入"
            class="w-full border border-gray-200 rounded-lg px-4 py-3 text-gray-700"
            :class="{ 'border-red-500': formErrors.contact }"
          >
          <view v-if="formErrors.contact" class="mt-1 text-sm text-red-500">
            {{ formErrors.contact }}
          </view>
        </view>
      </view>

      <!-- 联系电话 -->
      <view class="mb-4 flex items-center">
        <view class="w-20 flex items-center">
          <text class="mr-1 text-red-500">
            *
          </text>
          <text class="text-gray-700">
            联系电话:
          </text>
        </view>
        <view class="flex-1">
          <input
            v-model="formData.contactPhone"
            placeholder="请输入"
            type="number"
            class="w-full border border-gray-200 rounded-lg px-4 py-3 text-gray-700"
            :class="{ 'border-red-500': formErrors.contactPhone }"
          >
          <view v-if="formErrors.contactPhone" class="mt-1 text-sm text-red-500">
            {{ formErrors.contactPhone }}
          </view>
        </view>
      </view>

      <!-- 申请时间 -->
      <view class="mb-4 flex items-center">
        <view class="w-20 text-gray-700">
          申请时间:
        </view>
        <view class="flex-1 py-3 text-gray-700">
          {{ formData.applyTime }}
        </view>
      </view>

      <!-- 备注 -->
      <view class="mb-6 flex items-start">
        <view class="w-20 pt-3 text-gray-700">
          备注:
        </view>
        <view class="flex-1">
          <textarea
            v-model="formData.remark"
            placeholder="请输入"
            class="h-20 w-full border border-gray-200 rounded-lg px-4 py-3 text-gray-700"
          />
        </view>
      </view>

      <!-- 提交按钮 -->
      <view
        class="w-full rounded-lg py-4 text-center text-white font-medium"
        :class="isSubmitting ? 'bg-gray-400' : 'bg-orange-500'"
        @click="submitApplication"
      >
        {{ isSubmitting ? '提交中...' : '提交' }}
      </view>
    </view>

    <!-- 底部信息 -->
    <FgFooter />
  </view>
</template>
